<template>
	<view>
		<loadPage :loading="showLoading"></loadPage>
		<template v-if="!showLoading">
			<view class="orderbg">
					<view class="statistics">待处理</br>{{orderState.noSign}}</view>
					<view class="statistics">已处理</br>{{orderState.isSign}}</view>
					<view class="statistics">拒绝交易</br>{{orderState.noOrder}}</view>
					<view class="statistics">交易成功</br>{{orderState.isOrder}}</view>
			</view>
			<view class="orderdown">
				<view class="orderbutton">
					<view class="ordering">订单进行中</view>
					<view class="thisbutton" @click="goto(1)">
						<my-icon name="stamping" title="待处理" mode="left" size="50" :interval="20"></my-icon>
					</view>
					<view class="thisbutton" @click="goto(2)">
						<my-icon name="stamp" title="已处理" mode="left" size="50" :interval="20"></my-icon>
					</view>
				</view>
				<view class="orderbutton">
					<view class="ordering">订单结束</view>
					<view class="thisbutton" @click="goto(3)">
						<my-icon name="refuse_transaction" title="拒绝交易" mode="left" size="50" :interval="20"></my-icon>
					</view>
					<view class="thisbutton" @click="goto(4)">
						<my-icon name="success_transaction" title="交易成功" mode="left" size="50" :interval="20"></my-icon>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	/**
	 * 订单状态
	 * 1 未签字，2 已签字，3 拒绝签字，4 交易成功
	 */
	import myIcon from "components/common/myIcon"
	import Screening from "components/screening"
	import {getQuantitiesOfVariousOrders} from "apis/farmer/order.js"
	export default {
		data() {
			return {
				// 各类型订单数量统计
				orderState:{
					noSign: 0, //未签字
					isSign: 0, //已签字
					noOrder: 0, //拒绝签字
					isOrder: 0 //交易成功
				},
				showLoading: true,
			}
		},
		components:{
			myIcon,
			Screening
			},
		methods: {
			//页面跳转
			goto(u) {
				uni.navigateTo({
					url: '../orderlist/orderlist?'+'pageid='+u,
					animationType: 'slide-in-right',
					animationDuration: 1000
				})
			},
			async reqAllOrderDate(){
				const {
					refuseToSign,
					signed,
					successfulTrade,
					unSigned
				} = (await getQuantitiesOfVariousOrders()).data
				this.showLoading = false
				this.orderState.noSign = unSigned
				this.orderState.isSign = signed
				this.orderState.noOrder = refuseToSign
				this.orderState.isOrder = successfulTrade
			}
		},
		onShow() {
			this.reqAllOrderDate()
		}
	}
</script>

<style>
	@import url("orderprocess.css");
</style>
